<template>
  <div>
    <el-button size="small" type="text" icon="el-icon-refresh"/>

    <el-table
    :data="relations"
    size="mini"
    border
    stripe
    >
      <el-table-column prop="sourceTableName" label="源表"/>
      <el-table-column prop="targetTableName" label="目标表"/>
      <el-table-column prop="sourceColumnName" label="源列"/>
      <el-table-column prop="targetColumnName" label="目标列"/>
      <el-table-column prop="relation" label="关系"/>
    </el-table>
  </div>
</template>

<script>
import database from '@/api/database'

export default {
  name: 'TableRelationMap',
  props: {
    tableMeta: {
      type:Object
    },
    connName: String
  },
  data(){
    return {
      relations: []
    }
  },
  methods: {
    refreshRelations(){
      if (this.connName && this.tableMeta && this.tableMeta.actualTableName){
        let namespace = this.tableMeta.actualTableName.namespace
        database.relations(this.connName,namespace).then(res => {
          this.relations = res.data
        })
      }
    }
  },
  mounted() {
    this.refreshRelations()
  }
}
</script>

<style scoped>

</style>
